<template>
  <div class="box">
    <h1>child1 - 模块化</h1>
    <div>count: {{ $store.state.child1.count }}</div>
    <div>count: {{ count }}</div>
    <div>hundredflod: {{ $store.getters.hundredflod }}</div>
    <div>hundredflod: {{ hundredflod }}</div>
    <button @click="clickHandler1">调用actions修改count-1</button>
    <button @click="incrementHandler">调用actions修改count-2</button>
    <br /><br />
    <button @click="clickHandler2">调用mutations修改count-1</button>
    <button @click="SET_ADD">调用mutations修改count-2</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Child1",
  computed: {
    // 注意: 模块化的时候只能用对象形式
    ...mapGetters(['hundredflod']),
    ...mapState({
      count: (state) => state.child1.count,
    }),
  },
  methods: {
    ...mapMutations(["SET_ADD"]),
    ...mapActions(["incrementHandler"]),
    clickHandler1() {
      this.$store.dispatch("incrementHandler");
    },
    clickHandler2() {
      this.$store.commit("SET_ADD");
    },
  },
};
</script>

<style scoped></style>
